<% math.randomseed(os.time()) %>
    <link rel="stylesheet" href="/luci-static/vssr/css/vssr.css?v=<%=math.random(1,100000)%>">
    <script src="/luci-static/vssr/jquery.min.js"></script>

    <div class="pure-g status">
        <div class="pure-u-1-4">
            <div class="block">
                <div class="content">
                    <h4 id="vssr_status">
                        <%:Client%><br /><span class="red">
                                <%:Not Running%>
                            </span>
                    </h4>
                </div>
                <div class="img-con">
                    <img src="/luci-static/vssr/img/client.svg">
                </div>
            </div>
        </div>
        <div class="pure-u-1-4">
            <div class="block">
                <div class="content">
                    <h4 id="game_status">
                        <%:Game Mode%><br /><span class="red">
                                <%:Not Running%>
                            </span>
                    </h4>
                </div>

                <div class="img-con">
                    <img src="/luci-static/vssr/img/udp.svg">
                </div>

            </div>
        </div>
        <div class="pure-u-1-4">
            <div class="block ">
                <div class="content">
                    <h4 id="pdnsd_status">PDNSD<br /><span class="red">
                            <%:Not Running%>
                        </span></h4>
                </div>
                <div class="img-con">
                    <img src="/luci-static/vssr/img/pdnsd.svg">
                </div>
            </div>
        </div>
        <div class="pure-u-1-4">
            <div class="block ">
                <div class="content">
                    <h4 id="socks5_status">SOCKS5<br /><span class="red">
                            <%:Not Running%>
                        </span></h4>
                </div>

                <div class="img-con">
                    <img src="/luci-static/vssr/img/socks5.svg">
                </div>
            </div>
        </div>
    </div>

    <script>
        const VSSR_ASSETS = '/luci-static/vssr/';
        const STATUS1_URL = '<%=url([[admin]], [[services]], [[vssr]], [[run]])%>';
        const CLIENT = '<%:Client%>';
        const GAME_MODE = '<%:Game Mode%>';
        const RUNNING = '<%:Running%>';
        const NOT_RUNNING = '<%:Not Running%>';
        const CHECK_IP_URL = '<%=url([[admin]], [[services]], [[vssr]], [[ip]])%>';

        XHR.poll(2, STATUS1_URL, null,
            function (x, data) {
                if (data) {
                    if (data.global) {
                        $("#vssr_status").html(CLIENT + '<br><span class="green">' + RUNNING + '</span>');
                    } else {
                        $("#vssr_status").html(CLIENT + '<br><span class="red">' + NOT_RUNNING + '</span>');
                    }
                    if (data.game) {
                        $("#game_status").html(GAME_MODE + '<br><span class="green">' + RUNNING + '</span>');
                    } else {
                        $("#game_status").html(GAME_MODE + '<br><span class="red">' + NOT_RUNNING + '</span>');
                    }
                    if (data.pdnsd) {
                        $("#pdnsd_status").html('PDNSD<br><span class="green">' + RUNNING + '</span>');
                    } else {
                        $("#pdnsd_status").html('PDNSD<br><span class="red">' + NOT_RUNNING + '</span>');
                    }
                    if (data.socks5) {
                        $("#socks5_status").html('SOCKS5<br><span class="green">' + RUNNING + '</span>');
                    } else {
                        $("#socks5_status").html('SOCKS5<br><span class="red">' + NOT_RUNNING + '</span>');
                    }
                }
            }
        );

//]]>
    </script>
